<template>
  <div class="list">
    <div style="width:100%;height:auto;margin-bottom: 10px;">
      <el-button size="mini" @click="addProduct">添加商品</el-button>
    </div>
    <element-table :tableData="tableData">
      <el-table-column prop="id" label="商品ID" height="25px"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="title"
        label="商品名称"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="image"
        label="图片地址"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="sellPoint"
        label="商品卖点"
      ></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="num" label="商品数量"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="descs"
        label="商品描述"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </element-table>
    <!-- 分页 -->
    <product-pagination @currentPageEvent="getPage" />
    <!-- 添加商品对话框 -->
    <el-dialog
      title="添加商品"
      :visible.sync="dialogAddProductVisible"
      width="60%"
      :before-close="handleClose"
      >
      <el-form :inline="true" ref="form" :model="product" label-width="80px" style="width: auto;height: 280px;overflow: auto;">
        <el-form-item label="选择类目">
          <span>{{categoryData.name}}</span>
          <el-button size="mini" @click="dialogProductCategoryVisible = true">点击选择</el-button>
          <el-dialog 
            title="选择类目"
            width="40%" 
            :visible.sync="dialogProductCategoryVisible"
            append-to-body>
            <product-tree @onTreeData="getTreeData"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogProductCategoryVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogProductCategoryVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-form-item>
      <br>
        <el-form-item label="商品标题">
          <el-input v-model="product.title"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" >
          <el-input v-model="product.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" >
          <el-input v-model="product.price"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" >
          <el-input v-model="product.num"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" style="width:48%">
          <!-- <span>{{ uploadData.name}}</span> -->
          <span>{{ fileName}}</span>
          <el-button @click="dialogUploadVisible = true" size="mini">上传图片</el-button>
          <el-dialog
            title="上传图片"
            width="30%"
            :visible.sync="dialogUploadVisible"
            append-to-body>
            <ProductUpload @onUpload="getUpload"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogUploadVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogUploadVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品描述" >
          <ProductUeditor @onUeditor="getUeditor"/>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddProductVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitProductHandle">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 编辑商品对话框 -->
    <el-dialog
      title="编辑商品"
      :visible.sync="dialogEditorProductVisible"
      width="60%"
      :before-close="handleClose"
      >
      <el-form :inline="true" ref="form" :model="product" label-width="80px" style="width: auto;height: 280px;overflow: auto;">
        <el-form-item label="选择类目">
          <span>{{categoryData.name}}</span>
          <el-button size="mini" @click="dialogProductCategoryVisible = true">点击选择</el-button>
          <el-dialog 
            title="选择类目"
            width="40%" 
            :visible.sync="dialogProductCategoryVisible"
            append-to-body>
            <product-tree @onTreeData="getTreeData"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogProductCategoryVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogProductCategoryVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-form-item>
      <br>
        <el-form-item label="商品标题">
          <el-input v-model="product.title"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" >
          <el-input v-model="product.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" >
          <el-input v-model="product.price"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" >
          <el-input v-model="product.num"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" style="width:48%">
          <!-- <span>{{ uploadData.name}}</span> -->
          <span>{{ fileName}}</span>
          <el-button @click="dialogUploadVisible = true" size="mini">上传图片</el-button>
          <el-dialog
            title="上传图片"
            width="30%"
            :visible.sync="dialogUploadVisible"
            append-to-body>
            <ProductUpload @onUpload="getUpload"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogUploadVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogUploadVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品描述" >
          <ProductUeditor @onUeditor="getUeditor"/>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditorProductVisible = false">取 消</el-button>
        <el-button type="primary" @click="preSubmitProductHandle">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ElementTable from "@/components/element-table";
import ProductPagination from "../ProductPagination";
import ProductTree from "../ProductTree";
import ProductUpload from "../ProductUpload";
import ProductUeditor from "../ProductUeditor";
import api from "@/api";
export default {
  name: "ProductList",
  components: { ElementTable, ProductPagination, ProductTree, ProductUpload, ProductUeditor },
  data() {
    return {
      tableData: [],
      // 当前页
      page: 1,
      dialogAddProductVisible: false,
      product: {
        title: null,
        sellPoint: null,
        price: null,
        num: null,
      },
      dialogProductCategoryVisible: false,
      // 类目数据
      categoryData: {},
      dialogUploadVisible: false,
      uploadData: {},
      // 文件名字
      fileName: '',
      ueditorData: '',
      // 编辑商品对话框
      dialogEditorProductVisible: false,
      // 更新数据的id
      updateId: '',
    };
  },
  mounted() {
    this.getBookHttp(this.page);
  },
  methods: {
    // 商品请求
    getBookHttp(pageData) {
      api.getBook({
          page: pageData,
        })
        .then((res) => {
          if (res.data.status = 200) {
            this.tableData = res.data.data.result;
          }
        });
    },
    //拿到当前点击的页数click
    getPage(clickPage) {
      this.page = clickPage
      this.getBookHttp(clickPage);
    },
    // 编辑
    handleEdit(index, row) {
      this.updateId = row.id
      api.getPreUpdateItem({
        id: row.id
      }).then(res=>{
        if(res.data.status === 200){
          this.product = {
            title: res.data.data.title,
            sellPoint: res.data.data.sellPoint,
            price: res.data.data.num,
            num: res.data.data.num
          }
        }
      })
      this.dialogEditorProductVisible = true
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          api.getDeleteBookList({
              id: row.id,
            })
            .then((res) => {
              if (res.data.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getBookHttp(this.page)
              }else{
                  this.$message({
                  type: "error",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 对话框关闭
    handleClose(done) {
      done();
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
    // 添加商品 
    addProduct(){
      this.dialogAddProductVisible = true
    },
    // 提交商品
    submitProductHandle() {
      api.getInsertTbItem({
        title: this.product.title,
        cid:this.categoryData.cid,
        sellPoint:this.product.sellPoint,
        price:this.product.price,
        num:this.product.num,
        desc:this.ueditorData,
        image:this.uploadData.url
      }).then((res)=>{
        console.log('res',res);
        if(res.data.status === 200){
          this.dialogAddProductVisible = false;
          this.getBookHttp(this.page)
        }else{
          this.$notify({
            title: '添加失败',
            message: h('i', { style: 'color: teal'}, '请重新添加')
          })
        }

      })
    },
    // 提交编辑商品
    preSubmitProductHandle(){
      api.getUpdateTbItem({
        id: this.updateId,
        title: this.product.title,
        sellPoint: this.product.sellPoint,
        price: this.product.price,
        num: this.product.num,
      }).then(res => {
        if(res.data.status === 200){
          this.dialogEditorProductVisible = false
          this.getBookHttp(1)
        } else{
          this.$notify({
            title: "修改失败",
            message: h("i", {style: "color: teal"}, "请重新修改")
          })
        }
      })
    },
    // 获取类目数据
    getTreeData(data){
      this.categoryData = data
    },
    // 获取图片
    getUpload(data,fileDate){
      this.uploadData = data
      this.fileName = fileDate.name
    },
    // 富文本编辑器数据
    getUeditor(data){
      this.ueditorData = data
    }
  },
};
</script>

<style scoped>
.list {
  margin: 30px;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>